import React from "react";
import {
  FormControl,
  Box,
  Input,
  InputLeftAddon,
  Flex,
  Spacer,
  Checkbox,
  Text,
  Button,
  Divider 
} from "@chakra-ui/core";
import { FaUserAlt, FaLock, FaWeibo, FaWeixin, FaQq } from "react-icons/fa";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

export default function SignIn() {
  const border = "1px solid #e5e5e5";

  const handleSubmit = (user) => {
    fetch('https://conduit.productionready.io/users/login', {
      method: 'POST',
      // body: { user: { email, password } }
      body: JSON.stringify({ user })
    }).finally(() => {
      window.location = 'https://www.jianshu.com/'
    })
  };

  const schema = Yup.object({
    email: Yup.string()
      .required("请输入手机号或邮箱"),
    password: Yup.string()
      .required("请输入密码")
  });

  return (
    <Formik
      initialValues={{ email: "", password: "" }}
      onSubmit={handleSubmit}
      validationSchema={schema}
    >
      <Form>
        <Box fontSize="12px" border={border} borderRadius="5px">
          <Field name="email">
            {({ field, form }) => (
              <FormControl isInvalid={form.errors.name && form.touched.name}>
                <Flex borderBottom={border} bg="rgb(232,240,254)">
                  <InputLeftAddon mx="10px" children={<FaUserAlt />} />
                  <Input 
                    fontSize="14px"
                    color="gray.800" 
                    variant="unstyled" 
                    _focus={{ backgroundColor: "transparent" }} 
                    placeholder="手机号或邮箱"
                    {...field}
                  />
                </Flex>
              </FormControl>
            )}
          </Field>
          <Box color="red.600">
            <ErrorMessage name="email" />
          </Box>
          <Field name="password">
            {({ field, form }) => (
              <FormControl isInvalid={form.errors.name && form.touched.name}>
                <Flex bg="rgb(232,240,254)">
                  <InputLeftAddon mx="10px" children={<FaLock />} />
                  <Input 
                    fontSize="14px"
                    color="gray.800" 
                    variant="unstyled" 
                    type="password" 
                    placeholder="密码" 
                    {...field}
                  />
                </Flex>
              </FormControl>
            )}
          </Field>
          <Box color="red.600">
            <ErrorMessage name="password" />
          </Box>
        </Box>
        
        <Flex my="15px">
          <Checkbox defaultIsChecked>记住我</Checkbox>
          <Spacer />
          <Text fontSize="14px">登录遇到问题？</Text>
        </Flex>
        <Button type="submit" w="100%" colorScheme="blue" borderRadius="20px">
          登录
        </Button>
        <Flex mt="50px" mb="15px" align="center">
          <Divider />
          <Text mx="10px" whiteSpace="nowrap">社交账号登录</Text>
          <Divider />
        </Flex>
        <Flex fontSize="28px">
          <Spacer />
          <FaWeibo color="#e05244" />
          <Spacer />
          <FaWeixin color="#00bb29" />
          <Spacer />
          <FaQq color="#498ad5" />
          <Spacer />
        </Flex>
      </Form> 
    </Formik>
  );
}
